<template>
  <div>
    <line-chart
      :height="height"
      :optionNew="optionInformationTrend"
      :saveImage="true"
      @getBase64Image="getBase64Image"
    />
  </div>
</template>
<script>
  import {
    getInformationTrend,
  } from "@/api/system/reportGenerate";
  import LineChart from '@/components/Echarts/Generate/LineChart'

export default {
  props: {
    eventId: {
        type: Number,
        default: 0
      },

  },
  data() {
    return {
      optionSeriesInformationTrend: [],
      optionXAxisDataInformationTrend: [],
      optionLegendInformationTrend: [],
      optionTitleTextInformationTrend: '信息走势图',
      optionInformationTrend: {},
      height: "476px",
      loading: true,

    }
  },
  components:{
    LineChart,
  },
  computed: {
  },
  watch: {},
  mounted() {
    this.getInformationTrend()
  },
  created() {

  },
  methods: {
    getBase64Image(val) {
      this.$emit('getBase64Image', val)
    },

    getInformationTrend() {
      this.loading = true;
      getInformationTrend(this.eventId).then(response => {
        this.loading = false;
        //信息趋势图
        let dataZoomStart=response.data.dataZoomStart
        let dataZoomEnd=response.data.dataZoomEnd
        let markAreaData=response.data.markAreaData
        let name = '舆情数量'
        this.optionTitleTextInformationTrend = ""
        this.optionLegendInformationTrend = [name]
        let informationTrend = response.data.informationTrend
        this.optionXAxisDataInformationTrend = response.data.dateList
        this.optionSeriesInformationTrend = [];

        let data = []
        this.optionXAxisDataInformationTrend.forEach(day => {
          let filter = informationTrend.filter(item => (item.name === day))
          if (filter.length === 1) {
            filter.forEach((item) => {
              data.push(item.value)
            })
          } else {
            data.push(0)
          }
        })
        let serie = {
          name: name,
          label: {
            show: true,
            position: 'top'
          },
          type: 'line',
          stack: "数量",
          data: data,
          smooth: true,
          // markArea: {
          //   data: markAreaData
          // },
        }
        this.optionSeriesInformationTrend.push(serie)

        this.optionInformationTrend = {
          title: {
            text: this.optionTitleTextInformationTrend,
          },
          backgroundColor: '#fff',
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          dataZoom: [
            {
              type: 'slider',
              show: true,
              start:dataZoomStart,
              end:dataZoomEnd,
            }
          ],
          legend: {
            data: this.optionLegendInformationTrend
          },
          grid: {
            top: 30,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: this.optionXAxisDataInformationTrend,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              show: false
            }
          }],
          series: this.optionSeriesInformationTrend
        }
      });
    },

  }
}
</script>

